<template>
	<div style="height: 100%;flex-grow: 1;overflow: auto;background-color: #F5F5F5;padding:8px">
		<div style="border: 1px solid #dddddd;border-radius: 10px;background-color: white;height:40px;display: flex;align-items: center;">
			<img src="../../../assets/doc_image.png" style="width: 24px;height: 24px;"/><span>{{name}}</span>
		</div>
		<div style="margin-top: 10px;background-color: white;border-radius: 10px;border: 1px solid #dddddd;overflow: auto;" id="miyunyun-doc-section">
			<MainContentArea ref="mainContentArea"></MainContentArea>
		</div>
	</div>
</template>

<script>
	import MainContentArea from './MainContentArea.vue';
	import $ from 'jquery';
	export default {
		name: 'MainPageContainer',
		components: {
			MainContentArea
		},data() {
			return {
				name: ""
			}
		},provide() {
			return {
				children: []
			}
		},mounted() {
			$("#miyunyun-doc-section").height($(window).height()-120);
		},
		methods: {
			loadPage(item,para) {
				if(item.menuType==null || item.menuType=="serverpage"){
					this.name=item.name;
					this.$refs.mainContentArea.setComponent("page_container",{pageCode:item.pageCode});
				}else if(item.menuType=="clientpage"){
					this.name=item.name;
					this.$refs.mainContentArea.setComponent(item.pageCode,para);
				}
			}
		},
	}
</script>

<style>
	
</style>
